/*
 * @Author: kakay
 * @Date: 2017-08-17 14:49:18
 * */

import React, { Component } from 'react';
import { Flex, NavBar, Button, InputItem } from 'antd-mobile';
// import { Resource } from '../../../service/resource';
import BrowserUtils from '../../../service/history';
import './index.scss';

export default class MessageList extends Component {
    constructor(props) {
        super(props);
        // const data = props.location.state && props.location.state.data;
        this.state = {
          nowData: new Date()
        };
    }

      // componentDidMount() {      
      // }

      // componentWillReceiveProps(nextProps) {

      // }

    onTouchTapBack() {
        BrowserUtils.goBack();
    }


      render() {
        const { nowData } = this.state;
        const nowMonth = nowData.getMonth() + 1 < 10 ? "-0" + (nowData.getMonth() + 1) : "-" + nowData.getMonth() + 1;
        const nowDay = nowData.getDate() < 10 ? "-0" + nowData.getDate() : "-" + nowData.getDate();
        const nowYear = nowData.getFullYear();
        return (
          <div className="messageList" style={{ display: this.props.display }}>
            <NavBar
              mode="dark"
              className="am-tab-bar-bar"
              style={{ top: 0, position: "fixed", width: "100%"}}
              onLeftClick={() => this.onTouchTapBack()}
            >
              审批
            </NavBar>
            <div className="sub-title">请 款 单</div>
            <Flex justify="between" className="m_box_padding" >
              <Flex.Item>{nowYear + nowMonth + nowDay}</Flex.Item>
              <Flex.Item>流水号:22</Flex.Item>
              <Flex.Item>部门：办公室</Flex.Item>
            </Flex>
            <table className="m_table" width={'100%'}>
              <tbody>
                <tr>
                  <td className="m_td_bg m_td_first">姓名</td>
                  <td>
                    <InputItem
                      clear
                      className="m_input_box"
                      focused={this.state.focused}
                      onFocus={() => {
                        this.setState({
                          focused: false
                        });
                      }}
                    />
                  </td>
                  <td className="m_td_bg m_td_first">岗位</td>
                  <td>
                  <InputItem
                      clear
                      className="m_input_box"
                      focused={this.state.focused}
                      onFocus={() => {
                        this.setState({
                          focused: false
                        });
                      }}
                    />
                  </td>
                </tr>
                <tr>
                  <td className="m_td_bg m_td_first">请款事由</td>
                  <td colSpan={3} >
                    <InputItem
                      clear
                      className="m_input_box"
                      focused={this.state.focused}
                      onFocus={() => {
                        this.setState({
                          focused: false
                        });
                      }}
                    />
                  </td>
                </tr>
                <tr>
                  <td className="m_td_bg m_td_first">金额</td>
                  <td colSpan={3}> <InputItem
                    clear
                    className="m_input_box"
                    focused={this.state.focused}
                    onFocus={() => {
                      this.setState({
                        focused: false
                      });
                    }}
                  /></td>
                </tr>
                <tr>
                  <td className="m_td_bg m_td_first" rowSpan={4}>审批</td>
                  <td className="m_td_bg">总经理</td>
                  <td colSpan={2}>
                    <InputItem
                      clear
                      className="m_input_box"
                      focused={this.state.focused}
                      onFocus={() => {
                        this.setState({
                          focused: false
                        });
                      }}
                    /></td>
                </tr>
                <tr>
                  <td className="m_td_bg">财务</td>
                  <td colSpan={2}>
                    <InputItem
                      clear
                      className="m_input_box"
                      focused={this.state.focused}
                      onFocus={() => {
                        this.setState({
                          focused: false
                        });
                      }}
                    />
                  </td>
                </tr>
                <tr>
                  <td className="m_td_bg">出纳</td>
                  <td colSpan={2}>
                    <InputItem
                      clear
                      className="m_input_box"
                      focused={this.state.focused}
                      onFocus={() => {
                        this.setState({
                          focused: false
                        });
                      }}
                    />
                  </td>
                </tr>
                <tr>
                  <td className="m_td_bg">请款人</td>
                  <td colSpan={2}>
                    <InputItem
                      clear
                      className="m_input_box"
                      focused={this.state.focused}
                      onFocus={() => {
                        this.setState({
                          focused: false
                        });
                      }}
                    />
                  </td>
                </tr>
                <tr>
                  <td className="m_td_bg m_td_first">流程说明</td>
                  <td className="m_td_bg" colSpan={3}>请款单:申请人-财务经理-总经理-出纳</td>
                </tr>
              </tbody>
            </table>
            <Flex justify="between" className="m_box_top" >
            <Button type="primary" inline size="small">查看审批流程</Button>
                <Button type="primary" inline size="small">保存</Button>
              <Button type="primary" inline size="small">同意</Button>
              <Button type="primary" inline size="small">不同意</Button>
            </Flex>
          </div>

        );
    }
}

